<template>
    <ul class="tips">
        <li v-for="(item,index) in list" :key="item.index" @click="go(index)">
            <img :src="item.icon_url" alt="图片加载失败">
            <span>{{item.name}}</span>
        </li>
    </ul>
</template>

<script>
export default {
    name:"IconView",
    props:["list"],
    methods: {
        go(index){
            this.$store.commit("setCategoryIndex",index+1);
            this.$router.push("/category");
        }
    },
    // ,
	// data(){
	// 	return{
	// 		list:[]
	// 	}
	// },
    // async created(){
    //     let res = await this.$http.getHomeApi();
    //     this.list = res.data.data.list[2].icon_list
    //     console.log(this.list)
    // },
}
</script>

<style>
.tips {
    box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.tips li {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1rem;
}
.tips li img {
  width: 1.8rem;
}
.tips li span {
	margin-top: 0.3rem;
	font-size: 0.12rem;
}
</style>